<template>
  <SzCrudSingle ref="refSzCrudSingle" :cellClassName="cellClassName" :header-cell-class-name="headerCellClassName"
                :crm-type="crmType"
                :create-type="crmType"
                addBtnText="新建发票"
                search-place-holder="请输入发票号码/客户名称/合同编号">
    <template v-slot:detail="{crmOption, elTableOption,fieldAndListOption,handleHandle,crmOptionChange}">
      <BusinessDetail v-model:visible="crmOption.showDview"
                      v-model:id="elTableOption.rowID"
                      :crmOptionChange="crmOptionChange"
                      :page-list="crmOption.crmType == elTableOption.rowType ? fieldAndListOption.dataList : []"
                      v-model:page-index="elTableOption.rowIndex"
                      class="d-view" @hide-view="crmOption.showDview=false" @handle="handleHandle"></BusinessDetail>
    </template>
    <template v-slot:pagination-left>
      <span class="money-bar">{{ moneyDes }}</span>

    </template>
    <template v-slot:create="{crmOption, elTableOption,fieldAndListOption,handleHandle,crmOptionChange}">
      <BusinessCreate v-if="crmOption.createShow" :createAction="crmOption.createAction"
                      @close="crmOption.createShow = false"
                      @save-success="handleHandle"/>
    </template>

  </SzCrudSingle>
</template>

<script setup>
import BusinessCreate from './Create.vue'
import BusinessDetail from './Detail.vue'
import SzCrudSingle from "/src/views/crm/componentsNew/SzCrud/SzCrud.vue";
import {floatAdd} from "utils";
import {useNumberHook} from "@/hooks/useNumberHook.js";

defineOptions({
  /** 客户管理 的 产品列表 */
  name: 'ContractIndex',
})


const crmType = ref('contract')
const {separator} = useNumberHook();

/**
 * 通过回调控制class
 */
function cellClassName({row, column, rowIndex, columnIndex}) {
  if (column.property === 'num') {
    return 'can-visit--underline can-visit--bold'
  } else if (
      column.property === 'customerName' ||
      column.property === 'businessName' ||
      column.property === 'contactsName'
  ) {
    return 'can-visit--underline'
  } else if (column.property === 'money') {
    return 'xr-money'
  } else if (column.property === 'receivedMoney') {
    return 'xr-money green'
  } else if (column.property === 'unreceivedMoney') {
    return 'xr-money red'
  } else {
    return ''
  }
}

// todo whf 可以考虑将这个放入szCrudSignle的props中
function headerCellClassName({ row, column, rowIndex, columnIndex }) {
  if (column.property === 'num') {
    return 'header-can-visit-backgroud'
  }
  return ''
}

const refSzCrudSingle = ref()
const moneyPageData = computed(() => {
  if (!refSzCrudSingle.value) {
    return
  }
  // 选择数据，隐藏金额信息
  console.log("refSzCrudSingle.value",refSzCrudSingle.value)
  if (refSzCrudSingle.value.config.isSelect) {
    return false
  }

  if (refSzCrudSingle.value.elTableOption.selectionList.length == 0) {
    // 如果没有选择，就显示全部的数据
    let money = 0.0
    let dataList = refSzCrudSingle.value.fieldAndListOption.dataList
    for (let index = 0; index < dataList.length; index++) {
      const element = dataList[index]
      money = floatAdd(money, parseFloat(element.money))
    }
    return {
      businessSumMoney: money.toFixed(2)
    }
  } else {
    // 如果选择了列表，则计算选中的列表
    let money = 0.0
    for (let index = 0; index < refSzCrudSingle.value.elTableOption.selectionList.length; index++) {
      const element = refSzCrudSingle.value.elTableOption.selectionList[index]
      money = floatAdd(money, parseFloat(element.money))
    }
    return {
      businessSumMoney: money.toFixed(2)
    }
  }
})

const moneyDes = computed(() => {
  if (!refSzCrudSingle.value) {
    return
  }

  // 选择数据，隐藏金额信息
  if (refSzCrudSingle.value.config.isSelect) {
    return ''
  }

  let moneyData = refSzCrudSingle.value.fieldAndListOption.extraData
  console.log("moneyData",moneyData)
  if (!moneyData || JSON.stringify(moneyData) == '{}') {
    return ''
  }

  const canCheckMoney = moneyData.hasOwnProperty('contractMoney')
  const canCheckReceivedMoney = moneyData.hasOwnProperty('receivedMoney')
  const canCheckUnReceivedMoney = moneyData.hasOwnProperty('unReceivedMoney')
  let contractMoney = 0.0
  let receivedMoney = 0.0
  let unReceivedMoney = 0.0

  // 未勾选展示合同总金额信息
  if (refSzCrudSingle.value.elTableOption.selectionList.length == 0) {
    contractMoney = moneyData.contractMoney
    receivedMoney = moneyData.receivedMoney
    unReceivedMoney = moneyData.unReceivedMoney
  } else {
    for (let index = 0; index < refSzCrudSingle.value.elTableOption.selectionList.length; index++) {
      const element = refSzCrudSingle.value.elTableOption.selectionList[index]
      // 1 审核通过的合同
      if (element.checkStatus == 1) {
        if (canCheckMoney) {
          contractMoney = floatAdd(contractMoney, parseFloat(element.money || 0))
        }
        if (canCheckReceivedMoney) {
          receivedMoney = floatAdd(receivedMoney, parseFloat(element.receivedMoney || 0))
        }

        if (canCheckUnReceivedMoney) {
          unReceivedMoney = floatAdd(unReceivedMoney, parseFloat(element.unreceivedMoney || 0))
        }
      }
    }

    contractMoney = contractMoney.toFixed(2)
    receivedMoney = receivedMoney.toFixed(2)
    unReceivedMoney = unReceivedMoney.toFixed(2)
  }

  let moneyDes = ''
  if (canCheckMoney) {
    moneyDes = `合同总金额：${separator(contractMoney || 0)}`
  }

  if (canCheckReceivedMoney) {
    moneyDes += moneyDes ? ` / ` : ''
    moneyDes += `已回款金额：${separator(receivedMoney || 0)}`
  }

  if (canCheckUnReceivedMoney) {
    moneyDes += moneyDes ? ` / ` : ''
    moneyDes += `未回款金额：${separator(unReceivedMoney || 0)}`
  }

  return moneyDes
})

</script>


<style lang="scss" scoped>
@import '../styles/table';
</style>
